import { useState, useEffect } from 'react';
import { Tag, Input, message, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import styles from './MultiSelector.module.css';
import { TAG_COLORS, getTagColor } from '@/utils/tags';

// 通用项目接口
export interface SelectableItem {
  id?: number | string; // ID可选，新项目可能没有ID
  name: string;
  [key: string]: any; // 允许其他任意属性
}

interface MultiSelectorProps<T extends SelectableItem> {
  // 选中的项目
  value?: T[];
  // 所有可选项
  options?: T[];
  // 项目变化回调
  onChange?: (items: T[]) => void;
  // 获取所有项目的API，如果不提供options则使用此API获取
  fetchOptions?: () => Promise<T[]>;
  // 添加新项目的API
  addItem?: (name: string) => Promise<T>;
  // 项目颜色
  itemColors?: string[];
  // 是否显示添加按钮
  showAddButton?: boolean;
  // 添加按钮文本
  addButtonText?: string;
  // 模态框标题
  modalTitle?: string;
  // 输入框占位符
  inputPlaceholder?: string;
  // 新项目的处理函数，允许自定义新项目的创建逻辑
  createNewItem?: (name: string) => T;
  // 禁止输入，仅选择已有选项
  disableInput?: boolean;
}

function MultiSelector<T extends SelectableItem>({
  value = [],
  options: propOptions,
  onChange,
  fetchOptions,
  addItem,
  itemColors = TAG_COLORS,
  showAddButton = true,
  addButtonText = "添加项目",
  modalTitle = "添加新项目",
  inputPlaceholder = "请输入名称",
  createNewItem,
  disableInput = false
}: MultiSelectorProps<T>) {
  const [allItems, setAllItems] = useState<T[]>([]);
  const [selectedItems, setSelectedItems] = useState<T[]>(value);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [newItemName, setNewItemName] = useState('');
  const [loading, setLoading] = useState(false);

  // 使用props传入的options或者通过API获取
  useEffect(() => {
    if (propOptions) {
      setAllItems(propOptions);
    } else if (fetchOptions) {
      const loadItems = async () => {
        try {
          setLoading(true);
          const items = await fetchOptions();
          setAllItems(items);
          setLoading(false);
        } catch (error) {
          console.error('Failed to fetch items:', error);
          message.error('获取选项失败');
          setLoading(false);
        }
      };
      loadItems();
    }
  }, [propOptions, fetchOptions]);

  // 同步外部value值
  useEffect(() => {
    if (value && JSON.stringify(value) !== JSON.stringify(selectedItems)) {
      setSelectedItems(value);
    }
  }, [value]);

  // 处理项目点击
  const handleItemClick = (item: T) => {
    // 使用id或name作为唯一标识
    const identifier = item.id !== undefined ? item.id : item.name;
    const isSelected = selectedItems.some(selectedItem => 
      (selectedItem.id !== undefined ? selectedItem.id === identifier : selectedItem.name === identifier)
    );
    
    let newSelectedItems: T[];
    
    if (isSelected) {
      newSelectedItems = selectedItems.filter(selectedItem => 
        (selectedItem.id !== undefined ? selectedItem.id !== identifier : selectedItem.name !== identifier)
      );
    } else {
      // 创建一个新对象，只包含必要的属性
      const newItem: T = {
        id: item.id,
        name: item.name
      } as T;
      newSelectedItems = [...selectedItems, newItem];
    }
    
    setSelectedItems(newSelectedItems);
    onChange?.(newSelectedItems);
  };

  // 打开添加项目模态框
  const showAddItemModal = () => {
    if (disableInput) return;
    setIsModalVisible(true);
    setNewItemName('');
  };

  // 处理添加项目
  const handleAddItem = async () => {
    if (!newItemName.trim()) {
      message.warning('名称不能为空');
      return;
    }

    // 检查是否存在同名项目
    if (allItems.some(item => item.name === newItemName.trim())) {
      message.warning('项目已存在');
      return;
    }

    try {
      if (addItem) {
        setLoading(true);
        const newItem = await addItem(newItemName.trim());
        
        // 创建一个新的简化对象
        const simplifiedItem = {
          id: newItem.id,
          name: newItem.name
        } as T;
        
        // 更新所有项目列表
        setAllItems(prev => [...prev, simplifiedItem]);
        
        // 自动选中新添加的项目
        const newSelectedItems = [...selectedItems, simplifiedItem];
        setSelectedItems(newSelectedItems);
        onChange?.(newSelectedItems);
        
        setIsModalVisible(false);
        message.success('添加成功');
      }
    } catch (error) {
      console.error('Failed to add item:', error);
      message.error('添加失败');
    } finally {
      setLoading(false);
    }
  };

  // 获取项目颜色
  const getItemColor = (item: T) => {
    // 使用id或name作为唯一标识
    const identifier = item.id !== undefined ? item.id : item.name;
    const isSelected = selectedItems.some(selectedItem => 
      (selectedItem.id !== undefined ? selectedItem.id === identifier : selectedItem.name === identifier)
    );
    
    if (!isSelected) return 'default';
    
    // 使用统一的标签颜色函数
    return getTagColor(item.name);
  };

  return (
    <div className={styles.multiSelector}>
      <div className={styles.itemsWrapper}>
        {allItems.map((item, index) => (
          <Tag
            key={item.id !== undefined ? item.id : `${item.name}-${index}`}
            className={styles.item}
            color={getItemColor(item)}
            onClick={() => handleItemClick(item)}
          >
            {item.name}
          </Tag>
        ))}
        {showAddButton && !disableInput && (
          <Tag 
            className={styles.addButton} 
            onClick={showAddItemModal}
            icon={<PlusOutlined />}
          >
            {addButtonText}
          </Tag>
        )}
      </div>

      <Modal
        title={modalTitle}
        open={isModalVisible}
        onOk={handleAddItem}
        onCancel={() => setIsModalVisible(false)}
        confirmLoading={loading}
      >
        <Input
          placeholder={inputPlaceholder}
          value={newItemName}
          onChange={e => setNewItemName(e.target.value)}
          maxLength={50}
          autoFocus
        />
      </Modal>
    </div>
  );
}

export default MultiSelector; 
